<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<script src="/plugins/layui/layui.js"></script>
<!-- jQuery -->
<script src="/plugins/jquery.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/jquery-slimScroll/jquery.slimscroll.min.js"></script>

<!-- AdminLTE App -->
<script src="/plugins/adminLte/js/app.js"></script>

<!-- AdminLTE for demo purposes -->
<script src="/plugins/adminLte/js/demo.js"></script>

<script src="/js/core/device.min.js"></script>

<script type="text/javascript" src="/js/core/helper.min.js?v=3"></script>
<script type="text/javascript" src="/js/core/utils.min.js?v=101"></script>
<script type="text/javascript">
    getRolesAndPermissions();
</script>
<!DOCTYPE html>
<html style="height:100%">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
        <c:if test="${empty loginName}">
            居生活管理系统
        </c:if>
        <c:if test="${!empty loginName}">
            ${loginName}
        </c:if>
    </title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <!-- Theme style -->
    <link rel="stylesheet" href="/plugins/adminLte/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/plugins/adminLte/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/global.css">

</head>
<body class="hold-transition skin-blue sidebar-mini fixed" style="height:100%">
<div class="wrapper" style="height:100%">

    <header class="main-header">

        <!-- Logo -->
        <a href="#" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>JHC</b></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg">
                <b>
                    <c:if test="${empty loginName}">
                        居生活管理系统
                    </c:if>
                    <c:if test="${!empty loginName}">
                        ${loginName}
                    </c:if>
                </b>
            </span>
        </a>

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <shiro:hasRole name="admin">
                        <li class="dropdown messages-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-users"></i>
                            </a>
                            <ul class="dropdown-menu" id="onlineUsersMenu">
                                <li class="header">当前登录的用户数量: ${fn:length(onlineUsers)}</li>
                                <li>
                                    <ul class="menu">
                                        <c:forEach var="user" items="${onlineUsers}">
                                            <li>
                                                <a>
                                                    <div class="pull-left" style="font-size:20px">
                                                        <i class="fa fa-user"></i>
                                                    </div>
                                                    <h4>
                                                            ${user.username}
                                                    </h4>
                                                    <p>${user.accessTime}</p>
                                                    <p>${user.ip}</p>
                                                </a>

                                            </li>
                                        </c:forEach>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </shiro:hasRole>

                    <shiro:hasRole name="property">
                        <li class="dropdown messages-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-comment-o"></i>
                            </a>
                            <ul class="dropdown-menu" style="height: 150px">
                                <li class="header">选择你想做的操作</li>
                                <li>
                                    <ul class="menu">
                                        <li>
                                            <a href="/pages/business/feedback/submit.html" target="contentFrame">
                                                <div class="pull-left" style="font-size:20px">
                                                    <i class="fa fa-cloud-upload"></i>
                                                </div>
                                                <h4>提交反馈</h4>
                                                <p>如果产品使用中存在问题请反馈给我们</p>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="/pages/business/feedback/query.html" target="contentFrame">
                                                <div class="pull-left" style="font-size:20px">
                                                    <i class="fa fa-eye"></i>
                                                </div>
                                                <h4>查看已提交的反馈信息</h4>
                                                <p>查看你已经提交过的反馈信息及处理详情</p>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </shiro:hasRole>

                    <li class="dropdown messages-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="label label-success" id="msgBoxCount"></span>
                        </a>
                        <ul class="dropdown-menu" id="msgBoxMenu"></ul>
                    </li>

                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="/plugins/adminLte/img/user2.png" class="user-image" alt="User Image">
                            <span class="hidden-xs">${userLogName }</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img src="/plugins/adminLte/img/userbg.png" class="img-circle" alt="User Image">
                                <p>

                                    <small>账户类型：${roleExp }</small>
                                </p>
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="/pages/sys_mng/user/forSaveUserInfo.html" class="btn btn-default btn-flat"
                                       target="contentFrame">账号信息</a>
                                </div>
                                <div class="pull-right">
                                    <a href="/logout" class="btn btn-default btn-flat">注销</a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>

        </nav>
    </header>
    <!-- 侧边栏 -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="/plugins/adminLte/img/avatar5.png" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>${userName }</p>
                    <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                </div>
            </div>
            <!-- search form -->
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search...">
                    <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
                </div>
            </form>

            <!-- 侧边栏菜单 -->
            <ul class="sidebar-menu">
                <!-- 1级菜单 -->
                <c:forEach var="menu" items="${menus}">
                    <li class="treeview">
                        <a href="#">
                            <i class="fa ${menu.self.menuIcon }"></i>
                            <span>${menu.self.menuName }</span>
                            <span class="pull-right-container">
              		        <i class="fa fa-angle-left pull-right"></i>
            		        </span>
                        </a>
                        <ul class="treeview-menu">
                            <!-- 2级菜单 -->
                            <c:forEach var="secMenu" items="${menu.subMenus }">
                                <li class="treeview">
                                    <c:if test="${!empty secMenu.self.menuUrl}">
                                        <a href="${secMenu.self.menuUrl }" target="contentFrame">
                                    </c:if>
                                    <c:if test="${empty  secMenu.self.menuUrl}">
                                        <a href="#">
                                    </c:if>
                                        <i class="fa ${secMenu.self.menuIcon }"></i>
                                        ${secMenu.self.menuName }

                                    <c:if test="${empty  secMenu.self.menuUrl}">
                                        <span class="pull-right-container">
                                            <i class="fa fa-angle-left pull-right"></i>
                                        </span>
                                    </c:if>
                                        </a>
                                        <c:if test="${fn:length(secMenu.subMenus) != 0}">
                                        <!-- 3级菜单 -->
                                        <ul class="treeview-menu">
                                            <c:forEach var="thirdMenu" items="${secMenu.subMenus }">
                                                <li class="treeview">
                                                    <c:if test="${!empty thirdMenu.self.menuUrl}">
                                                    <a href="${thirdMenu.self.menuUrl }" target="contentFrame">
                                                    </c:if>
                                                    <c:if test="${empty  thirdMenu.self.menuUrl}">
                                                    <a href="#">
                                                        </c:if>
                                                        <i class="fa ${thirdMenu.self.menuIcon }"></i>
                                                            ${thirdMenu.self.menuName }

                                                        <c:if test="${empty  thirdMenu.self.menuUrl}">
                                                        <span class="pull-right-container">
                                                            <i class="fa fa-angle-left pull-right"></i>
                                                        </span>
                                                        </c:if>
                                                    </a>
                                                    <!-- 4级菜单 -->
                                                    <c:if test="${fn:length(thirdMenu.subMenus) != 0}">
                                                    <ul class="treeview-menu">
                                                        <c:forEach var="fourth" items="${thirdMenu.subMenus }">
                                                            <li>
                                                                <a href="${fourth.self.menuUrl }" target="contentFrame">
                                                                    <i class="fa ${fourth.self.menuIcon }"></i>${fourth.self.menuName }
                                                                </a>
                                                            </li>
                                                        </c:forEach>
                                                    </ul>
                                                    </c:if>
                                                </li>
                                            </c:forEach>
                                        </ul>
                                        </c:if>
                                </li>
                            </c:forEach>
                        </ul>
                    </li>

                </c:forEach>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="height:85%">
        <!-- Content Header (Page header) -->
        <iframe id="contentFrame" name="contentFrame" scrolling="yes" frameborder="no" width="100%" src="/pages/login/dashboard.html"
                height="100%" style="padding: 15px;padding-bottom:0px"></iframe>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> ${version}
        </div>

        <c:if test="${empty loginName}">
            <strong>Copyright &copy; 2014-2018 居生活.</strong> All rights
            reserved.
        </c:if>
        <c:if test="${!empty loginName}">
            欢迎使用${loginName}
        </c:if>

    </footer>


</div>
<!-- ./wrapper -->


</body>
</html>
<script type="text/javascript">
    var layer;
    layui.use(['layer', 'element', 'laypage'], function (args) {
        layer = layui.layer;
        //iframe 高度自适应
        $("#contentFrame").load(function () {
            //var mainheight = $("#contentFrame").contents().find("body").height();
            //console.log("height "+mainheight);
            //$("#contentFrame").height(mainheight + 40);
        });

        //菜单点击自动选中
        $(".treeview-menu li a").click(function () {

            if ($(this).attr("href") == "#")
                return;
            $(".treeview-menu li").removeClass("active");
            var lis = $(this).parents("li");
            for (var i = 0; i < lis.length; i++) {
                $(lis[i]).addClass("active");
            }

        });

        if (device.mobile()) {
            $("#contentFrame").css("padding", "5px");
            $("#contentFrame").css("padding-bottom", "0px");
        }

        updateMessageBox();

        IframeOnClick.track(document.getElementById("contentFrame"), function() {
            $(document).click();
        });

    });

    function updateMessageBox() {
        var param = {};
        postJsonNotLayuiLoad("/user/updateMessageBox.x", $.param(param), function (data) {
                var msgList = data.data;
                var msgCount = 0;
                var msgHeader;
                for (var i = 0; i < msgList.length; i++) {
                    msgCount += msgList[i].count;
                }

                $("#msgBoxCount").empty();
                $("#msgBoxCount").append(msgCount);

                if (msgCount == 0) {
                    msgHeader = "您暂无任何系统消息";
                } else {
                    msgHeader = "有" + msgCount + "条系统信息需要处理";
                }

                $("#msgBoxMenu").empty();
                $("#msgBoxMenu").append('<li class="header">' + msgHeader + '</li>');
                for (var i = 0; i < msgList.length; i++) {
                    console.log(msgList[i]);
                    msgHandler(msgList[i].msgType);
                    $("#msgBoxMenu").append(
                        '<li>' +
                        '<ul class="menu">' +
                        '<li>' +
                        '<a href=' + msgList[i].url + ' target="contentFrame">' +
                        '<div class="pull-left" style="font-size:20px">' +
                        '<i class="fa fa-envelope-o"></i>' +
                        '</div>' +
                        '<h4>' +
                        msgList[i].title +
                        '</h4>' +
                        '<p>' + msgList[i].message + '</p>' +
                        '</a>' +
                        '</li>' +
                        '</ul>' +
                        '</li>'
                    );
                }
            }
        );
    }

    function msgHandler(type) {
        if (type == 'userInfoMsg') {
            setTimeout(showfillInfoDialog,1000);
        }
    }

    /* 用于给子页面调用,判断是否属于某个角色,多个角色用|隔开*/
    function hasRoles(roles) {
        let role = getTopWindow().role;
        var roleArray = roles.replace(/ /g, '').split("|");
        for (var i = 0; i < roleArray.length; i++) {
            for (var j = 0; j < role.length; j++) {
                if (roleArray[i] == role[j]) {
                    return true;
                }
            }
        }
        return false;
    }

    function showfillInfoDialog() {
        layui.layer.open({
            title: '请完善管理员信息',
            type: 2,
            area: ['400px', '450px'],
            fixed: false, //不固定
            maxmin: true,
            content: '/pages/sys_mng/user/forSaveUserInfo.html?popup=true'
        });
    }

    var IframeOnClick = {
        resolution: 200,
        iframes: [],
        interval: null,
        Iframe: function() {
            this.element = arguments[0];
            this.cb = arguments[1];
            this.hasTracked = false;
        },
        track: function(element, cb) {
            this.iframes.push(new this.Iframe(element, cb));
            if (!this.interval) {
                var _this = this;
                this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
            }
        },
        checkClick: function() {
            if (document.activeElement) {
                var activeElement = document.activeElement;
                for (var i in this.iframes) {
                    if (activeElement === this.iframes[i].element) { // user is in this Iframe
                        if (this.iframes[i].hasTracked == false) {
                            this.iframes[i].cb.apply(window, []);
                            this.iframes[i].hasTracked = true;
                        }
                    } else {
                        this.iframes[i].hasTracked = false;
                    }
                }
            }
        }
    };
</script>